/**
 * Created by Administrator on 2017/10/30.
 */
import React from 'react'
import  ReactDOM from  'react-dom'
import { ListView } from 'antd-mobile';
import classNames from 'classnames'
import './PopularRecommended.css'

import  PopularRecommendedTitle from './img/title.png'
import  goodsLogo from './img/images08@2x.png'
import  Home_integral from '../../../../static/img/Home_integral.png'
import sell_11 from  './img/11.11icon.png'
import  more from  './img/more.png'



class PopularRecommended extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            PopularRecommended:'',
            height: document.documentElement.clientHeight * 3 / 4,
            product_href:'productinfo.php?product_id='
        };
    }

    componentDidMount() {


    }


    componentWillReceiveProps(nextProps){
        if(nextProps.PopularRecommended.length>1){
            this.setState({
                PopularRecommended: nextProps.PopularRecommended,
            });
        }

    }
    go_to_product_info(product_id){
        window.location.href=this.state.product_href+product_id
    }
    render() {
        let PopularRecommended_item={
            borderBottom: '1px solid #f2f3f5',
            borderRight: '1px solid #f2f3f5',
            float: 'left'
        }
        let PopularRecommended_item_no_left={
            borderBottom: '1px solid #f2f3f5',
            float: 'left'
        }
        return (
           <div>
               <div className="PopularRecommended">
                   <div className="PopularRecommendedTitle">
                       <div className="PopularRecommendedTitle_img">
                           <img src={PopularRecommendedTitle} alt=""/>
                       </div>
                       <div className="PopularRecommendedTitle_more">
                           {/*<img  src={more}/>*/}
                       </div>
                   </div>
                   {this.state.PopularRecommended?
                       <div className="PopularRecommended_content">
                        {this.state.PopularRecommended.map((item,index) => (

                            <div   style={index%2?PopularRecommended_item_no_left:PopularRecommended_item}>
                                <div className="PopularRecommended_item_txt"
                                     onClick={ ()=>{this.go_to_product_info(item.product_id) } }
                                >
                                    <img className="PopularRecommended_product_img" src={item.image}/>
                                    <img className="PopularRecommended_left_logo" src={sell_11} />
                                    <div className="PopularRecommended_item_sell_title">
                                        <p> {item.product_name}</p>
                                    </div>
                                    <div className="PopularRecommended_item_sell_info">
                                        <div className="PopularRecommended_item_sell_info_price"
                                             style={{
                                                 color:'#f1820e',
                                                 fontSize:'0.28rem'
                                             }}
                                        >￥{item.sku[0].price}</div>
                                        <div className="PopularRecommended_item_sell_info_num">月销{item.sku[0].sell_stock}</div>
                                    </div>
                                    <div className="PopularRecommended_item_sell_discounts">
                                        <div className="PopularRecommended_vipPrice">VIP：￥{item.sku[0].vip_price}</div>
                                        <div className="PopularRecommended_sendIntegral">
                                            <img src={Home_integral}
                                              style={{
                                                  width: '0.32rem',
                                                  height: '0.23rem'
                                              }}
                                            />积分{item.sku[0].deduction}
                                        </div>
                                    </div>
                                </div>
                            </div>
                       ))}
                       </div>:''
                   }

               </div>
           </div>
        );
    }
}


export default PopularRecommended

/*
<div className="FineRecommended_item">
    <div className="FineRecommended_item_left">
    <img src={goodsLogo}/>
</div>
<div className="FineRecommended_item_right">
    <div className="FineRecommended_item_sell_title">
        <img src={sell_11} /> 三只松鼠脆皮核桃老人小孩全家欢礼包套餐900克装整箱包邮
    </div>
    <div className="FineRecommended_item_sell_info">
    <div className="FineRecommended_item_sell_info_price">￥149.00</div>
    <div className="FineRecommended_item_sell_info_num">月销8865</div>
    </div>
    <div className="FineRecommended_item_sell_discounts">
        <div className="FineRecommended_vipPrice" >VIP：￥129.00</div>
        <div className="FineRecommended_sendIntegral">
            <img src={Home_integral}/>积分200
        </div>
    </div>
    </div>
</div>*/
